<script setup lang="ts">
import { ref } from 'vue';
import {useRouter} from 'vue-router'
interface Tab{
  name:string,
  path:string,
  icon:string
}
interface Props{
  tabs?:Tab[]
}
const props = withDefaults(defineProps<Props>(),{
  tabs: () => [
    {
      name:"首页",
      path:"home",
      icon:"icon-home"
    },
    {
      name:"分类",
      path:"cate",
      icon:"icon-cate"
    },
    {
      name:"购物车",
      path:"cart",
      icon:"icon-cart"
    },
    {
      name:"我的",
      path:"my",
      icon:"icon-my"
    }
  ]
})
const $router=useRouter()
const changeTab= (item) =>{
  $router.push(item.path)
}
</script>

<template>
  <div class="tab-bar"
    w:w="screen"
    w:flex="~ nowrap"
    w:align="items-center"
    w:justify="around"
    w:bg="light-50"
    w:p="4"
    w:border="t-1 gray-400 solid"
  >
    <div v-for="(item,idx) in props.tabs" :key="idx" :class="{active: item.path==$route.name}" @click="changeTab(item)"
      w:flex="~ col nowrap"
      w:align="items-center"
      w:text="gray-400"
    >
      <div class="icon iconfont" :class="[item.icon]"
        w:text="5xl"
      ></div>
      <div class="title"
        w:text="lg"
        w:m="t-4"
      >{{item.name}}</div>
    </div>
  </div>
</template>

<style lang="scss" scoped>
.tab-bar{
  .active{
    color: #60a5fa;
  }
  
}
</style>